<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>添加银行卡</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="../css/base.css" />
	<link rel="stylesheet" href="../css/add_bankCard.css" />
	<link rel="stylesheet" href="../css/personal/mobileSelect.css">
	<script src="../js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="../js/rem.js"></script>
	<script src="../js/person/mobileSelect.min.js"></script>
	<script src="../js/person/city.js"></script>
	<script src="../js/common.js"></script>
	<style>
		.add_bank_ul_li{
				overflow: hidden;
				border-top: 1px solid #e3e3e3;
			}
			.belongTo{
				border: none;
				outline: none;
			}
			.addBank_khh{
				position: absolute !important;
				height: 0.5rem;
				line-height: 0.5rem;
				right: 0.1rem;
				border: none;
				outline: none;
				border-bottom: 1px solid #e3e3e3;
			}
			.add_bank_btn{
				border: none;
				outline: none;
			}
			.belongTo{
				position: absolute !important;
				text-align: right;
				height: 0.5rem;
				line-height: 0.5rem;
				right: 0.1rem;
				border: none;
				outline: none;
				background-color: #ffffff;
				border-bottom: 1px solid #e3e3e3;
			}
			option{
				width: 1rem !important;
			}
			.yhType{
				width: 1.5rem; border:none;outline:none; float:right; height:0.5rem;line-height:0.5rem;
			}
			.ylphone,.yhkh{
				height: 0.5rem;
				line-height: 0.5rem;
				border: none;
				outline: none;
				text-align: right;
				width: 2rem;
			}
		.perName{
			height: 0.5rem;
			line-height: 0.5rem;
			border: none;
			outline: none;
			text-align: right;
			width: 2rem;
		}
		.right{
			height: 0.4rem;
			margin-top: 0.05rem;
		}
		</style>
</head>

<body>
	<div class="header">
		<a href="javascript:history.back(-1)"><img src="../img/g_next.png" alt="" /></a>
		添加银行卡
	</div>
	<ul class="add_bank_ul">
		<li class="add_bank_ul_li">
			<span class="left">姓名</span>
			<input name="perName" type="text" class="right perName" placeholder="请输入姓名">
		</li>
		<li class="add_bank_ul_li">
			<span class="left">银行卡号</span>
			<input name="yhkh" type="text" class="right yhkh" placeholder="请输入银行卡号">
		</li>
		<li class="add_bank_ul_li">
			<span class="left">预留手机号</span>
			<input name="ylphone" type="text" class="right ylphone" placeholder="请输入预留手机号">
		</li>
		<li class="add_bank_ul_li" id="areaa">
			<span class="left">所属地区</span>
			<input class="right belongTo" id="area2" readonly type="text" placeholder="请选择">
		</li>
		<li class="add_bank_ul_li">
			<span class="left">开户行</span>
			<input class="right addBank_khh" type="text" placeholder="请输入开户行">
		</li>
		<li class="add_bank_ul_li">
			<span class="left">银行类型</span>
			<select name="yhType" class="yhType" id="yhType">

			</select>
		</li>
	</ul>
	<input class="add_bank_btn" type="button" onclick="bankSub(this)" value="提交" />
	<script type="text/javascript" src="../js/city.js"></script>
</body>

<script>
	$(function () {
		$('.addBank_true').click(function () {
			$(this).attr("src", "../img/g_radio_z.png");
			$(this).attr('da-bool', 'flase');
			$('.addBank_false').attr('da-bool', 'true');
			$('.addBank_false').attr("src", "../img/g_radio.png");
		});
		$('.addBank_false').click(function () {
			$(this).attr("src", "../img/g_radio_z.png");
			$(this).attr('da-bool', 'true');
			$('.addBank_true').attr("src", "../img/g_radio.png");
			$('.addBank_true').attr("da-bool", "false");
		});
	});
	var a = [];
	var mobileSelect = new MobileSelect({
		trigger: '#area2',
		title: '地区选择',
		wheels: [{
			data: city
		}],
		keyMap: {
			id: 'areaId',
			value: 'name',
			childs: 'sub'
		},
		position: [2],
		callback: function (indexArr, data) {
			console.log(data);
			var areaid = '';
			for (var i = 0, l = data.length; i < l; i++) {
				areaid += data[i].name;
				$('#area2').val(areaid);
				a.push(data[i].areaId)
			}
			$('.add_bank_btn').attr('cityCode', a)
		}
	});
    $.ajax({
        url: SURL + '/jfd/usersBankcards/getRealName',
		data:{
            userId:localStorage.getItem('userId')
		},
        type: 'post',
        dataType: 'json',
        success: res => {
            if(res.data==null || res.data==''){

			}else{
                $('.perName').val(res.data)
				$('.perName').attr('readonly','readonly');
			}
        }
    })
	$.ajax({
		url: SURL + '/jfd/banks/getAllBank',
		type: 'get',
		dataType: 'json',
		success: res => {
			var resCityid = res.bankList;
			resCityid.forEach(element => {
				$('.yhType').append(`
					<option value="${element.bankId}" bankId="${element.bankId}">${element.bankName}</option>
				`)
			});
		}
	})
	function bankSub(e) {
        var perName = $('.perName').val()
		var yhkh = $('.yhkh').val();
		var ylphone = $('.ylphone').val();
		var addBank_khh = $('.addBank_khh').val();
		var addBank_true = $('.addBank_true').attr('da-bool');
		var c;
		var options=$('#yhType').val();
		addBank_true == true ? c = 1 : c = -1;
		var b = [];
		var pattern = /^([1-9]{1})(\d{14}|\d{18})$/
		var mobile = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
		if(perName==''){
		    alert('姓名不能为空')
		}else{
            var cityCode = $(e).attr('cityCode');
            b.push(cityCode.split(','));
            console.log(b);
            var b1 =b[0][0]+"";
            var b2 =b[0][1]+"";
            var b3= b[0][2]+"";
            $.ajax({
                url: SURL + '/jfd/usersBankcards/addBankcards',
                data: {
                    realName:perName,
                    userId:localStorage.getItem('userId'),
                    provinceId: b1,
                    cityId: b2,
                    areaId: b3,
                    bankId: options,
                    accArea: addBank_khh,
                    accNo: yhkh,
                    phone: ylphone
                },
                type: 'get',
                dataType: 'json',
                success: res => {
                    console.log(res.code);
                    if(res.code==-1){
                        alert(res.msg);
                    }else if(res.code==-2){
                        alert(res.msg);
                        window.location.href='bankCard.html';
                    }else if(res.code==0){
                        alert(res.msg);
                        window.location.href='bankCard.html';
                    }
                }
            })
		}
		// if(!mobile.test(ylphone)){
		// 	alert('请输入正确电话号码')
		// }
		// if(!pattern.test(yhkh)){
		// 	alert('请输入正确银行卡号');
		// }

	}
</script>

</html>
